<template>
	<page-meta :page-style="themeColor"></page-meta>
	<!-- <uni-navbar></uni-navbar> -->
	<view :style="{ minHeight: 'calc(100vh - 55px)' }" class="page-img">

		<!-- 活动 -->
		<view class="activity-box">
			<view class="activity-item" v-for="(item,index) in list" :key="item.id" @click="goDetail(item)">
				<uni-transition :duration="index < 10 ? 300 * (index + 1) : 300 * (index - parseInt(index/10)*10 + 2)"
					:mode-class="modeClass" :show="transShow">
					<view>
						<u-image :src="item.coverImage" mode="widthFix" v-show="transShow"></u-image>
					</view>
				</uni-transition>
			</view>
		</view>


		<!-- 底部tabBar -->
		<view class="page-bottom">
    
			<diy-bottom-nav></diy-bottom-nav>
		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'

	export default {
		components: {
			uniPopup,
			nsNavbar,
			uniTransition
		},
		data() {
			return {
				list: [],
				modeClass: ['fade'],
				transShow: false,
				categoryData:null
			}
		},
		onLoad() {
      
			this.transShow = false
			this.list.length = 0
			this.getActivty()
			this.modeClass = ['slide-bottom']
			this.$nextTick(() => {
				setTimeout(() => {
					this.transShow = true
				}, 500)
			})
		},
    onShow(){
      this.$api.sendRequest({
      url: "/api/member/judgeBuy",
      success: res => {
        console.log(res,'/api/member/judgeBuy');
        if(!res.data){
          uni.hideShareMenu()
        }
      }
    });
    },
		methods: {
			goDetail(val) {
        console.log(val);
        // return
				if(val.url){
					/* 公众号文章 */
					uni.navigateTo({
						url:"/pages/goods/webView?url=" + encodeURIComponent(JSON.stringify(val.url))
					})
				}else{
					/* 富文本内容 */
					uni.navigateTo({
						url:"/pages/index/detail?id=" + val.id
					})
				}
			},
			getActivty(){
				this.$api.sendRequest({
					url: '/api/diyview/info',
					data: {
						name: 'DIY_VIEW_INDEX'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.categoryData = res.data;
							if (this.categoryData.value) {
								this.categoryData = JSON.parse(this.categoryData.value);
							}
              console.log(this.categoryData);
							this.categoryData.value.map(item=>{
                console.log(item,'item');
								if(item.componentTitle == "文章"){
									item.previewList = Object.values(item.previewList)
									item.articleIds.map(item2=>{
										item.previewList.map(item3=>{
											if(item2 == item3.article_id){
												const params = {
													coverImage: this.$util.img(item3.cover_img),
													url: item3.article_abstract,
													id: item3.article_id
												}
												this.list.push(params)
											}
										})
									})
								}
							})
						}
					}
				})
			}
		},
		onShareTimeline() {
			return {
				title: '鹏城快享',
				query: `source_member=${uni.getStorageSync("user_id")}`,
				imageUrl: ""
			}
		},
		onShareAppMessage() {
			return {
				title: "鹏城快享",
				path: `/pages/index/index?source_member=${uni.getStorageSync("user_id")}`,
				imageUrl: ''
			}
		},
	};
</script>

<style lang="scss">
	@import '@/common/css/diy.scss';

	.activity-box {
		margin: 0 30rpx;

		.activity-item {
			width: 100%;
			margin-bottom: 30rpx;

			image {
				width: 100%;
				border-radius: 20rpx;
			}
		}
	}

	::v-deep .u-image__image {
		border-radius: 20rpx !important;
	}
</style>

<style scoped>
	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	/deep/ .placeholder {
		height: 0;
	}

	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
		display: none;
	}

	/deep/ .ns-copyright-info {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>